<template>
  <div class="floating-contact">
    <el-tooltip content="Contact via WhatsApp" placement="left">
      <a 
        v-if="appStore.storeInfo.whatsapp" 
        :href="`https://wa.me/${appStore.storeInfo.whatsapp?.replace(/\s/g, '')}`" 
        target="_blank" 
        class="contact-btn whatsapp-btn"
      >
        <n-icon size="28">
          <LogoWhatsapp />
        </n-icon>
      </a>
    </el-tooltip>

    <el-tooltip content="WeChat QR Code" placement="left">
      <button 
        v-if="appStore.storeInfo.wechat_qr" 
        class="contact-btn wechat-btn" 
        @click="showWeChatQR = true"
      >
        <n-icon size="28">
          <ChatbubbleEllipsesOutline />
        </n-icon>
      </button>
    </el-tooltip>

    <el-tooltip content="Back to Top" placement="left">
      <button 
        v-show="showBackToTop" 
        class="contact-btn top-btn" 
        @click="scrollToTop"
      >
        <n-icon size="28">
          <ArrowUpOutline />
        </n-icon>
      </button>
    </el-tooltip>
  </div>

  <!-- WeChat QR Modal -->
  <el-dialog v-model="showWeChatQR" title="Scan WeChat QR Code" width="90%" :max-width="400">
    <div class="wechat-qr-content">
      <img v-if="appStore.storeInfo.wechat_qr" :src="appStore.storeInfo.wechat_qr" alt="WeChat QR Code" />
      <p>{{ appStore.storeInfo.wechat }}</p>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { NIcon } from 'naive-ui'
import { 
  LogoWhatsapp, 
  ChatbubbleEllipsesOutline, 
  ArrowUpOutline 
} from '@vicons/ionicons5'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const showWeChatQR = ref(false)
const showBackToTop = ref(false)

const handleScroll = () => {
  showBackToTop.value = window.scrollY > 300
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.floating-contact {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 999;
}

.contact-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: var(--transition-base);
  text-decoration: none;
  
  &:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  
  &:active {
    transform: scale(0.95);
  }
}

.whatsapp-btn {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

.wechat-btn {
  background: linear-gradient(135deg, #09B83E, #07A533);
}

.top-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.wechat-qr-content {
  text-align: center;
  padding: 1rem;
  
  img {
    max-width: 300px;
    margin: 0 auto 1rem;
    border-radius: var(--radius-md);
  }
  
  p {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }
}

@media (max-width: 768px) {
  .floating-contact {
    right: 1rem;
    bottom: 1rem;
  }
  
  .contact-btn {
    width: 48px;
    height: 48px;
  }
}
</style>

